<template>
  <div class="home">
    <el-row style="top: 8%">
      <el-col :span="16" :offset="4">
        <img class="wow animate__slideInUp" src="../assets/new2.svg" style="width: 150px;border-radius: 50%;" />
        <h1 class="slogan wow animate__slideInUp">
          童&nbsp;心&nbsp;童&nbsp;语
        </h1>
        <h2 class="slogan2 wow animate__slideInUp" data-wow-delay="0.2s">
          在线问答 | 插画生成 | 智能助手
        </h2>
        <h1 class="date wow animate__slideInUp" data-wow-delay="1s">
          {{ date }}
        </h1>
        <h2 class="time wow animate__slideInUp" data-wow-delay="0.8s">
          {{ time }}
        </h2>
      </el-col>

      <!-- <el-col :span="9" style="display: flex; align-items: center">
        <el-input
          v-model="input3"
          placeholder="Search..."
          class="input1 wow animate__slideInUp"
          size="large"
          v-show="time.length != 0"
        >
          <template #prepend>
            <el-select
              :popper-append-to-body="false"
              v-model="select"
              placeholder="Select"
              style="
                border-radius: 4px 0 0 4px;
                width: 110px;
                background-color: #2a303c;
              "
              size="large"
              class="select1"
            >
              <el-option label="Baidu" value="1" />
              <el-option label="Google" value="2" />
            </el-select>
          </template>
          <template #append>
            <el-button :icon="Search" @click="search()" />
          </template> </el-input
      ></el-col> -->
    </el-row>
    <el-row style="bottom: -180px">
      <el-col
        :span="12"
        :offset="6"
        style="
          display: flex;
          text-align: center;
          align-items: center;
          justify-content: center;
        "
      >
        <h2 class="slogan3 wow animate__slideInDown" data-wow-delay="0.2s">
          AI赋能，助力新时代儿童教育
        </h2></el-col
      >
    </el-row>
  </div>
</template>

<script lang="ts" setup name="ChatView">
import { defineComponent, ref, toRefs, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const date = ref("");
const time = ref("");
const input3 = ref("");
const select = ref("1");
function format(newDate: Date): string {
  var day = newDate.getDay();
  var y = newDate.getFullYear();
  var m =
    newDate.getMonth() + 1 < 10
      ? "0" + (newDate.getMonth() + 1)
      : newDate.getMonth() + 1;
  var d = newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate();
  var h =
    newDate.getHours() < 10 ? "0" + newDate.getHours() : newDate.getHours();
  var min =
    newDate.getMinutes() < 10
      ? "0" + newDate.getMinutes()
      : newDate.getMinutes();
  var s =
    newDate.getSeconds() < 10
      ? "0" + newDate.getSeconds()
      : newDate.getSeconds();

  var dict = {
    1: "一",
    2: "二",
    3: "三",
    4: "四",
    5: "五",
    6: "六",
    0: "天",
  };
  var week = dict[day];
  return (
    y + "年" + m + "月" + d + "日  " + "星期" + week + h + ":" + min + ":" + s
  );
}

var timerId = setInterval(function () {
  var newDate = new Date();
  //   document.querySelector(".p1").textContent = format(newDate);
  date.value = format(newDate).substring(
    0,
    format(newDate).indexOf("星期") + 3
  );
  time.value = format(newDate).substring(format(newDate).indexOf("星期") + 3);
}, 1000);

function search(): void {
  if (input3.value.length == 0) {
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: "<strong>请输入搜索内容</strong>",
      type: "warning",
      offset: 80,
    });
    return;
  }

  if (select.value == "1") {
    window.open("https://www.baidu.com/s?wd=" + input3.value);
  }
  if (select.value == "2") {
    window.open("https://www.google.com/search?q=" + input3.value);
  }
}
</script>
<style scoped lang="less">
@font-face {
  font-family: "Zhu";
  src: url("../assets/fonts/MaokenZhuyuanTi.ttf");
}
.home {
  background: linear-gradient(rgba(14, 14, 14, 0.7), rgba(0, 0, 0, 0.7)),
    url(../assets/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.95;
  height: 100%;
}
.slogan {
  font-size: 6.25rem;
  font-weight: 250;
  letter-spacing: 0.1rem;
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
  color: #c7a46c;
  margin-bottom: 2%;
}
.slogan2 {
  font-size: 1.5rem;
  font-weight: 200;
  letter-spacing: 1px;
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
  color: #c7a46c;
  margin-bottom: 1.25%;
}
.slogan3 {
  font-size: 0.95rem;
  font-weight: 100;
  letter-spacing: 1px;
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
  color: #a6adba;
  margin-bottom: 1.25%;
}
.time {
  font-size: 1.5rem;
  font-weight: 100;
  letter-spacing: 6px;
  color: #a6adba;
  margin-bottom: 2%;
  font-family: "Zhu", ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
}
.date {
  font-size: 1.5rem;
  font-weight: 100;
  color: #a6adba;
  margin-top: 5%;
  margin-bottom: 1%;
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
}
/deep/ .el-input {
  color: #a6adba;
  --el-input-border-color: #2a303c;
  --el-input-bg-color: #2a303c;
  height: 50px;
}

/deep/ .el-input__inner {
  color: #a6adba;
  font-weight: 200;
  font-size: 1rem;
  font-family: "Zhu", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
}

/deep/ .el-input-group__append {
  background-color: #191d24;
  box-shadow: none;
}
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
// 滚动条整体部分
::-webkit-scrollbar {
  width: 8px;
  height: 3px;
}
// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-track {
  background-color: rgb(42, 44, 48 / 46%);
  border-radius: 10px;
}
// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-thumb {
  background: #81878f;
  cursor: pointer;
  border-radius: 10px;
}
</style>
